<template>
    <div>
        <div style="background-color: #e1f5fe; padding: 15px; margin-bottom: 20px; border-radius: 8px; border-left: 4px solid #03A9F4;">
            <h3 style="color: #0277BD; margin-top: 0;">⚡ 技术解释：计算属性缓存与组件通信</h3>
            <p><strong>计算属性缓存：</strong>computedChartData只有在value变化时才重新计算，避免不必要的重复计算，提升性能。</p>
            <p><strong>组件通信 (Props)：</strong>通过:data="computedChartData"将计算结果传递给子组件chart，实现父子组件数据传递。</p>
            <p><strong>响应式更新：</strong>当value改变时，计算属性自动更新，子组件也会接收到新数据并重新渲染。</p>
            <p><strong>数据处理：</strong>在计算属性中进行数据转换（value * 2），将原始数据处理成组件需要的格式。</p>
        </div>
        <button @click="increment">增加值</button>
        <p>值 : {{ value }}</p>
        <p>计算属性 :  {{ computedChartData }}</p>
        <chart :data="computedChartData"></chart>
</div>
</template>
<script>
import { computed } from 'vue';

export default{
    data() {
        return {
            value : 0
        };
    },
    computed : {
        computedChartData() {
            return this.value * 2;
        }
    },
    methods: {
        increment(){
            this.value ++;
        }
    }
};

</script>